import styled from "./index.module.less";

import {
  Button,
  Frame,
  Loading,
  LegacyCard,
  SkeletonBodyText,
  Link,
} from "@shopify/polaris";

import Modal from "../../components/Modal";
import { PostProductListApi } from "../../api/product";
import { useState, useEffect } from "react";
import IndexTableWithLoadingExample from "./Tables";

const App = () => {
  const [show, setShow] = useState(false);

  const [state, setState] = useState(false);
  const [TableData, setTableData] = useState([] as PRODUCTMODULE.Items[]);

  const [pagenumber, setPagenumber] = useState(1);

  const Product = (pagenumber: number) => {
    PostProductListApi({
      format: "json",
      is_delete: 0,
      method: "get.product.admin.list",
      page_no: pagenumber || 1,
      page_size: 10,
      sign: "9ddfabc6e1d9e66ec5e9062ae3e1d2df",
      status: 1,
      store_locale: "en_US",
      timestamp: 1691483278,
      token: "9d486d74d765e9b033ee6f667d137a0a",
    }).then((res) => {
      console.log(res);

      setTableData(res.data.items);
      setShow(true);
    });
  };

  useEffect(() => {
    setShow(false);
    Product(pagenumber);
    
  }, [pagenumber]);

  return (
    <div className={styled.box}>
      <div className={styled.header}>
        <div className={styled.title}>产品</div>
        <div>
          <Button size="slim" outline>
            导出
          </Button>
          <span className={styled.empty}>
            <Button
              outline
              size="slim"
              onClick={() => {
                setState(true);
              }}
            >
              导入
            </Button>
          </span>
          <Button primary size="slim">
            添加产品
          </Button>
        </div>
      </div>
      <div className={styled.footer}>
        {show && (
          <IndexTableWithLoadingExample
            setPagenumber={setPagenumber}
            pagenumber={pagenumber}
            TableData={TableData}
            Product={Product}
          />
        )}
        {!show && (
          <LegacyCard title="">
            <LegacyCard.Section>
              <SkeletonBodyText lines={1} />
            </LegacyCard.Section>
            <LegacyCard.Section>
              <SkeletonBodyText />
            </LegacyCard.Section>
          </LegacyCard>
        )}
        {!show && (
          <Frame>
            <Loading />
          </Frame>
        )}
      </div>
      {/* 公共组件 */}
      {state && <Modal state={state} setState={setState} />}
      {/* 公共组件 */}
      <div className={styled.liaojie}>
        详细了解<Link>产品</Link>
      </div>
    </div>
  );
};

export default App;
